Telegram Group & Telegram Channel
💻 UI дизайн для No-code разработчика: типографика

Совсем недавно мы рассказали о теории цвета в цифровом дизайне. Если вы пропустили нашу предыдущую рассылку, то советуем почитать пост на эту тему. А сегодня мы расскажем про типографику.

Главные принципы и советы по работе с типографикой в digital-проекте ⬇️

⭐️ Чтение в вебе и на мобилках отличается от чтения книг. Книги читаем построчно сверху вниз, в вебе текст читаем по Z-траектории — когда глаза скользят по веб-странице слева направо, потом делают скачок по диагонали налево, оттуда снова направо. Люди сканируют веб-страницы, так что надо давать то, за что взгляд сможет зацепиться. Поэтому важно уделять внимание вёрстке.

⭐️ Чтобы разнообразить вёрстку и увеличить «сканируемость» страницы, — дробите на абзацы, вводите подзаголовки, работайте с весом шрифтовой группы — увеличивайте и уменьшайте жирность для одного и того же шрифта.

⭐️ Не рекомендуется использовать в проекте более двух шрифтов. А лучше — взять один. Если берётся два шрифта, то они должны сочетаться. Подобрать шрифтовую пару можно, например, на Fontjoy, Typotheque, Mixfont и проч.

⭐️ Учитывайте уместность шрифта. Например, в SaaS-сервисе неуместно использовать рукописный, меловой шрифт. Он подойдёт, к примеру, проекту для школьников. В спортивном приложении странно будет смотреться курсивный шрифт — он лучше подойдёт для книжного приложения, и то для заголовков.

⭐️ Осторожно обращайтесь с декоративными шрифтами. Их избыток повысит когнитивную нагрузку на пользователя и создаст лишний шум.

⭐️ Заголовок — всегда больше основного текста. Подойдёт не просто увеличенный кегль (размер шрифта в пикселях), но и написание капсом или заглавный шрифт.

⭐️ Основной текст плохо читается капсом и курсивом. Капс и курсив уместны в заголовке.

⭐️ В заголовке следует увеличивать межбуквенное расстояние. В основном тексте — межстрочное.

⭐️ В вебе лучше делать более узкие колонки текста, увеличивая межстрочное расстояние. В мобилках текст можно растягивать на всю ширину экрана.

⭐️ Предпочтительный минимальный кегль для веба и приложений — 16рх, для Android — 12рх и для iOS — 11рх.



Конечно, это лишь малая часть информации о большом и сложном мире цифрового дизайна. Если вы хотите освоить все тонкости digital-дизайна, научиться делать красивые, эффективные и высокооплачиваемые IT-продукты в любых форматах, — тогда ждём на курсе «Профессия No-code разработчик», который стартует уже в четверг, 3 августа!

💰Стать высокооплачиваемым специалистом:
codebreakers.tech/profession



tg-me.com/code_breakers/579
Create:
Last Update:

💻 UI дизайн для No-code разработчика: типографика

Совсем недавно мы рассказали о теории цвета в цифровом дизайне. Если вы пропустили нашу предыдущую рассылку, то советуем почитать пост на эту тему. А сегодня мы расскажем про типографику.

Главные принципы и советы по работе с типографикой в digital-проекте ⬇️

⭐️ Чтение в вебе и на мобилках отличается от чтения книг. Книги читаем построчно сверху вниз, в вебе текст читаем по Z-траектории — когда глаза скользят по веб-странице слева направо, потом делают скачок по диагонали налево, оттуда снова направо. Люди сканируют веб-страницы, так что надо давать то, за что взгляд сможет зацепиться. Поэтому важно уделять внимание вёрстке.

⭐️ Чтобы разнообразить вёрстку и увеличить «сканируемость» страницы, — дробите на абзацы, вводите подзаголовки, работайте с весом шрифтовой группы — увеличивайте и уменьшайте жирность для одного и того же шрифта.

⭐️ Не рекомендуется использовать в проекте более двух шрифтов. А лучше — взять один. Если берётся два шрифта, то они должны сочетаться. Подобрать шрифтовую пару можно, например, на Fontjoy, Typotheque, Mixfont и проч.

⭐️ Учитывайте уместность шрифта. Например, в SaaS-сервисе неуместно использовать рукописный, меловой шрифт. Он подойдёт, к примеру, проекту для школьников. В спортивном приложении странно будет смотреться курсивный шрифт — он лучше подойдёт для книжного приложения, и то для заголовков.

⭐️ Осторожно обращайтесь с декоративными шрифтами. Их избыток повысит когнитивную нагрузку на пользователя и создаст лишний шум.

⭐️ Заголовок — всегда больше основного текста. Подойдёт не просто увеличенный кегль (размер шрифта в пикселях), но и написание капсом или заглавный шрифт.

⭐️ Основной текст плохо читается капсом и курсивом. Капс и курсив уместны в заголовке.

⭐️ В заголовке следует увеличивать межбуквенное расстояние. В основном тексте — межстрочное.

⭐️ В вебе лучше делать более узкие колонки текста, увеличивая межстрочное расстояние. В мобилках текст можно растягивать на всю ширину экрана.

⭐️ Предпочтительный минимальный кегль для веба и приложений — 16рх, для Android — 12рх и для iOS — 11рх.



Конечно, это лишь малая часть информации о большом и сложном мире цифрового дизайна. Если вы хотите освоить все тонкости digital-дизайна, научиться делать красивые, эффективные и высокооплачиваемые IT-продукты в любых форматах, — тогда ждём на курсе «Профессия No-code разработчик», который стартует уже в четверг, 3 августа!

💰Стать высокооплачиваемым специалистом:
codebreakers.tech/profession

BY Code Breakers | No-code solutions


Warning: Undefined variable $i in /var/www/tg-me/post.php on line 283

Share with your friend now:
tg-me.com/code_breakers/579

View MORE
Open in Telegram


Code Breakers | No code solutions Telegram | DID YOU KNOW?

Date: |

Newly uncovered hack campaign in Telegram

The campaign, which security firm Check Point has named Rampant Kitten, comprises two main components, one for Windows and the other for Android. Rampant Kitten’s objective is to steal Telegram messages, passwords, and two-factor authentication codes sent by SMS and then also take screenshots and record sounds within earshot of an infected phone, the researchers said in a post published on Friday.

Telegram today rolling out an update which brings with it several new features.The update also adds interactive emoji. When you send one of the select animated emoji in chat, you can now tap on it to initiate a full screen animation. The update also adds interactive emoji. When you send one of the select animated emoji in chat, you can now tap on it to initiate a full screen animation. This is then visible to you or anyone else who's also present in chat at the moment. The animations are also accompanied by vibrations. This is then visible to you or anyone else who's also present in chat at the moment. The animations are also accompanied by vibrations.

Code Breakers | No code solutions from ms


Telegram Code Breakers | No-code solutions
FROM USA